<template>
  <demoBlock title="弹出位置" >
    <vcu-cell is-link @click="showPopup('top')" value="顶部弹出"></vcu-cell>
    <vcu-cell is-link @click="showPopup('bottom')" value="底部弹出"></vcu-cell>
    <vcu-cell is-link @click="showPopup('left')" value="左侧弹出"></vcu-cell>
    <vcu-cell is-link @click="showPopup('right')" value="右侧弹出"></vcu-cell>
    <vcu-popup v-model:show="show" :position="position" :style="style">
      内容
    </vcu-popup>
  </demoBlock>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const show = ref(false);
    const position = ref("");
    const style = ref(null);
    const showPopup = (p) => {
      show.value = true;
      position.value = p;
      switch (p) {
        case "top":
          style.value = { height: "30%" };
          break;
        case "bottom":
          style.value = { height: "30%" };
          break;
        case "left":
          style.value = { width: "30%", height: "100%" };
          break;
        case "right":
          style.value = { width: "30%", height: "100%" };
          break;
      }
    };
    return {
      show,
      showPopup,
      position,
      style,
    };
  },
});
</script>
